<template>
  <div class="app-container">
    <el-dialog :title="dialogTitle" :visible="dialogFormVisible" @close="closeDialog">
      <el-form
        ref="${changeClassName}Form"
        v-loading="formLoading"
        :rules="roleRules"
        :model="formData"
        label-width="120px"
        element-loading-text="正在保存数据，请稍后"
        auto-complete="on"
        label-position="right"
      >
        <el-row type="flex" justify="center">
<#if columns??>
    <#list columns as column>
    	<#if column_index != 0 && column_index % 4 = 0 && column_has_next>
    	</el-row>
    	<el-row type="flex" justify="center">
    	</#if>
    	<#if column.save = 'Y'|| column.update  = 'Y'>
	    	<el-col :span="span">
	            <el-form-item label="${column.remark}" 
	            <#if column.isNull =='YES' >
	            prop="${column.changeField}"        
		    	</#if>
	            >
	            <#if column.el ='el-select' >
	            <add-or-update-select :form-data="formData" :key-str="'${column.changeField}'" />
	            <#else>        
	             <el-input v-model="formData.${column.changeField}" name="${column.changeField}" />
		    	</#if>
	            </el-form-item>
	         </el-col>
	    </#if>
    </#list>
</#if> 
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit">确 定</el-button>
        <el-button @click="onCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { saveData } from '@/api/table/curd'
import { getUserInfo } from '@/utils/auth'
export default {
  name: 'AddOrUpdate',
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    sysOption: {
      type: Array,
      default: () => {
        return []
      }
    },
    dialogTitle: {
      type: String,
      default: ''
    },
    formData: {
      type: Object,
      default: () => ({
        userName: '',
        id: null
      })
    }
  },
  data() {
    return {
      formLabelWidth: '120px',
      span: 8,
      user: getUserInfo(),
      roleRules: {
<#if columns??>
    <#list columns as column>
	<#if column.save = 'Y'|| column.update  = 'Y'>
		<#if column.isNull = 'YES'>
		${column.changeField}: [
		<#if column.formatter != ''>
      		{ required: true, trigger: 'change', message: '请选择${column.remark}' }
      	<#else>
      		{ required: true, trigger: 'blur', message: '请输入${column.remark}' }
      	</#if>
      	<#if column_has_next>
      	],
      	<#else>
      	]
      	</#if>
    	
		</#if>
	</#if>
    </#list>
</#if> 
      },
      formLoading: false,
      isDisabled: false,
      sysList: [],
      sysLoading: false
    }
  },
  mounted() {
  },
  methods: {
    onSubmit() {
      this.formLoading = true
      this.$refs['${changeClassName}Form'].validate(valid => {
        // 表单不通过不提交
        if (!valid) {
          this.formLoading = false
          return
        }
        this.formData.createUserCode = this.user.id
        this.formData.updateUserCode = this.user.id
        saveData('/${changeClassName}/save${className}Dto', this.formData).then((response) => {
          if (response && response.status !== 'Y') {
            this.$message.error('保存失败')
            this.$parent.formVisible = true
            this.formLoading = false
            return
          }
          this.$message({ message: response.message, type: 'success' })
          this.$parent.fetchData()
          this.$parent.formVisible = false
          this.formLoading = false
        }).catch((err) => {
          this.$message({
            message: err || 'Error',
            type: 'error',
            duration: 4 * 1000
          })
          this.$parent.formVisible = true
          this.formLoading = false
        })
      })
    },
    onCancel() {
      this.$parent.formVisible = false
      this.$parent.fetchData()
    },
    closeDialog() {
      this.$parent.formVisible = false
      this.$parent.fetchData()
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>
